<template>
	<view class="term-container">
		<view class="term-content">
			<view v-if="termFinancialList.length > 0" class="card-container">
				<view class="product-list">
					<view class="product-item" v-for="(item, index) in termFinancialList" :key="item.id">
						<view class="product-info">
							<view class="product-name">
								<text class="name">{{ item.name }}</text>
								<u-tag :text="item.profit === 1 ? '收益型' : '净值型'"
									:type="item.profit === 1 ? 'primary' : 'success'" size="mini" />
							</view>
							<view class="product-detail">
								<view class="detail-item">
									<text class="label">七日年化</text>
									<text class="value highlight">{{ (item.annualincome * 100).toFixed(2) }}%</text>
								</view>
								<view class="detail-item">
									<text class="label">起投金额</text>
									<text class="value">{{ item.leastmoney }}元</text>
								</view>
								<view class="detail-item">
									<text class="label">投资期限</text>
									<text class="value">{{ item.investerm }}</text>
								</view>
							</view>
						</view>
						<view class="product-action">
							<u-button type="primary" shape="circle" @click="handleBuy(item)" class="buy-btn">
								<text class="btn-text">立即投资</text>
							</u-button>
						</view>
					</view>
				</view>
			</view>

			<u-empty v-else mode="list" text="很抱歉！暂时还没有期限理财向您推荐" icon="http://cdn.uviewui.com/uview/empty/list.png">
				<u-button slot="bottom" type="primary" size="medium" @click="getTermFinancialList">刷新试试</u-button>
			</u-empty>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			termFinancialList: []
		}
	},
	onLoad() {
		// 模拟数据，暂时注释掉API调用
		this.getTermFinancialList()
	},
	methods: {
		// 获取期限理财列表
		async getTermFinancialList() {
			uni.request({
				url: '/api/bf/term/list',
				method: 'GET',
				success: (res) => {
					this.termFinancialList = res.data.termFinancialList
				}
			})
		},
		// 处理购买
		handleBuy(item) {
			const user = uni.getStorageSync('user')
			uni.showModal({
				title: '提示',
				content: `确定买入 ${item.name} 吗？`,
				success: async (res) => {
					if (res.confirm) {
						try {
							uni.request({
								url: '/api/bf/term/buyTermFinancial',
								method: 'POST',
								data: {
									termFinancialId: item.id,
									user: user
								},
								success: (res) => {
									if (res.data === true) {
										uni.showToast({
											title: '买入成功',
											icon: 'success'
										})
									} else {
										uni.showToast({
											title: res.data.msg || '买入失败',
											icon: 'error'
										})
									}
								},
								fail: (err) => {
									uni.showToast({
										title: '网络错误',
										icon: 'error'
									})
								}
							})
						} catch (e) {
							console.error(e)
						}
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.term-container {
	padding: 0 30rpx;
	background-color: #f8f8f8;
	min-height: 100vh;

	.term-content {
		padding-top: 30rpx;

		.product-list {
			.product-item {
				padding: 30rpx;
				margin-bottom: 30rpx;
				background: #ffffff;
				border-radius: 12rpx;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

				&:last-child {
					margin-bottom: 0;
				}

				.product-info {
					margin-bottom: 20rpx;

					.product-name {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						justify-content: space-between;

						.name {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							margin-right: 20rpx;
						}
					}

					.product-detail {
						display: flex;
						justify-content: space-between;

						.detail-item {
							text-align: center;
							flex: 1;

							.label {
								font-size: 24rpx;
								color: #999;
								display: block;
								margin-bottom: 10rpx;
							}

							.value {
								font-size: 28rpx;
								color: #333;

								&.highlight {
									color: #ff4d4f;
									font-weight: bold;
								}
							}
						}
					}
				}

				.product-action {
					display: flex;
					justify-content: center;

					.buy-btn {
						width: 80%;
						height: 80rpx;
						background: linear-gradient(90deg, #2979ff, #36cfc9);
						border: none;
						box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);

						.btn-text {
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
}
</style>
